<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <SvgIcon name="edit" size="18px"></SvgIcon>
        <span>&nbsp;更新店铺基本信息</span>
      </div>
      <div class="body">
        <el-form style="max-width: 600px" :model="shopBasicInfoForm" label-width="auto" label-position="left" size="default">
          <el-form-item label="店铺LOGO">
            <oss-upload v-model="shopBasicInfoForm.logo" :custom="true">
              <template v-slot:custom="{ listData, select }">
                <div class="avatar" @click="select">
                  <img v-for="(url, index) in listData" :key="index" :src="url" style="width: 100%; height: 100%" />
                </div>
              </template>
            </oss-upload>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input v-model="shopBasicInfoForm.name" />
          </el-form-item>
          <el-form-item label="店铺背景海报图片">
            <oss-upload v-model="shopBasicInfoForm.backgroundPoster" :custom="true">
              <template v-slot:custom="{ listData, select }">
                <div class="poster" @click="select">
                  <img v-for="(url, index) in listData" :key="index" :src="url" style="width: 100%; height: 100%" />
                  <div class="upload-additional-info">
                    <p style="font-size: 10px; color: #787878">图片建议宽度大于两倍的高度</p>
                    <el-button :link="true" type="primary" @click="select"> 点击上传 </el-button>
                  </div>
                </div>
              </template>
            </oss-upload>
          </el-form-item>
          <el-form-item label="店铺联系电话">
            <el-input v-model="shopBasicInfoForm.phone" />
          </el-form-item>
          <el-form-item label="店铺标志（flags）">
            <el-select
              multiple
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="输入内容并回车添加标签"
              class="flags"
              :model-value="shopBasicInfoForm.flags == null || shopBasicInfoForm.flags === '' ? [] : shopBasicInfoForm.flags.split(',')"
              @update:model-value="(labels) => (shopBasicInfoForm.flags = labels.join(','))"
            >
            </el-select>
          </el-form-item>
          <el-form-item label="店铺公告">
            <el-input v-model="shopBasicInfoForm.notice" />
          </el-form-item>

          <el-form-item label="&nbsp;">
            <el-button @click="cancelOperation">取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from 'vue'
import ComponentHat from '@/plugins/type'
import router from '@/router'
const { $API, $modal } = <ComponentHat>getCurrentInstance().proxy
import { ShopBasicInfo } from '@/types/response/shop'
import OssUpload from '@/components/oss-upload/index.vue'
const shopBasicInfoForm = ref(new ShopBasicInfo())
// // 请求基本信息进行回显
onMounted(async () => {
  const result = await $API.shop.shopBasicInfo()
  if (!result.success) {
    $modal.alertError('回显信息请求失败！')
    return
  }
  shopBasicInfoForm.value = result.data
})
async function onSubmit() {
  const result = await $API.shop.updateShopBasicInfo(shopBasicInfoForm.value)
  if (!result.success) {
    $modal.msgError('修改失败！' + result.message)
    return
  }
  $modal.alertSuccess('保存成功！')
  router.back()
}
function cancelOperation() {
  // 取消修改-就返回
  router.back()
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    overflow: auto;
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      display: flex;
      align-items: center;
      padding: 0 0 40px;
      font-size: 18px;
      font-weight: bold;
    }

    .body {
      display: flex;
      justify-content: center;

      .avatar {
        width: 100px;
        height: 100px;
        background-color: #f2f2f2;
      }

      .poster {
        display: flex;
        align-items: center;
        height: 200px;

        .upload-additional-info {
          margin-left: 20px;
        }

        .flags {
          background-color: red;
        }
      }
    }
  }
}
</style>
